<template>
  <a-row>
    <a-col>
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model ref="ruleForm" :model="pageFilter.q" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row style="display:flex">
              <a-col :span="6">
                <a-form-model-item label="涉诈网站">
                  <a-input v-model="pageFilter.fraudUrl" placeholder="请输入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="诈骗类型">
                  <a-select v-model="pageFilter.fraudType" allowClear placeholder="请选择" style="width:100%;">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="(item, key) in fraud_typeArr" :key="key" :value="item.value">{{
                      item.title
                    }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="批次号" style="margin-left:0px">
                  <a-input v-model="pageFilter.batchNo" placeholder="请输入" />
                </a-form-model-item>
              </a-col>
              <a-col :span="6" style="margin-left:0px">
                <a-space :size="6">
                  <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                  <a-button @click="onResetForm" icon="reload">重置</a-button>
                </a-space>
              </a-col>
            </a-row>
            <a-col :span="6">
              <a-form-model-item label="反馈状态">
                <a-select v-model="pageFilter.feedbackStatus" allowClear placeholder="请选择" style="width:100%;">
                  <a-select-option v-for="(item, key) in statusArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="反馈时间">
                <a-range-picker v-model="rvTime" allowClear style="width:100%;" format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD" @change="onTimeChange" />
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="onOut()">导出</a-button>
        </div>
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange">
          <template slot="fraudType" slot-scope="text">
            <span>{{ setTittle(text) }}</span>
          </template>
          <template slot="feedbackStatus" slot-scope="text">
            <span v-if="text == '1'">成功</span>
            <span v-if="text == '0'">失败</span>
          </template>
        </z-table>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { downLoadMix } from '@/utils/export-util/util'
import { feedbackLog, unsealFeedbackLog, feedbackLogOut, unsealFeedbackLogOut } from '@/api/plugging/authority/fd.js'
import { getDictItemsFromCache } from '@/api/api'
export default {
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '数据编号',
          dataIndex: 'dataNo',
          align: 'center',
        },
        {
          title: '涉诈网站',
          dataIndex: 'fraudUrl',
          align: 'center',
        },
        {
          title: '涉诈类型',
          dataIndex: 'fraudType',
          align: 'center',
          scopedSlots: { customRender: 'fraudType' },
        },
        {
          title: '发现时间',
          dataIndex: 'discoveryTime',
          align: 'center',
        },
        {
          title: '反馈时间',
          dataIndex: 'feedbackTime',
          align: 'center',
        },
        {
          title: '反馈状态',
          dataIndex: 'feedbackStatus',
          align: 'center',
          scopedSlots: { customRender: 'feedbackStatus' },
        },
        {
          title: '失败原因',
          dataIndex: 'failReason',
          align: 'center',
        },
        {
          title: '批次号',
          dataIndex: 'batchNo',
          align: 'center',
        },
      ],
      rvTime: [],
      fraud_typeArr: getDictItemsFromCache('case_fraud_type'),
      statusArr: [
        { title: "全部", value: '', },
        { title: "成功", value: 1, },
        { title: "失败", value: 0, },
      ],
    }
  },
  created() {
    this.getRouter(this.$route.name)
  },
  watch: {
    $route(data) {   //data为当前路由信息
      this.getRouter(data.name)
    }
  },
  methods: {
    getRouter(name) {
      console.log("11111111111")
      console.log(name)
      if (name == 'authority-log-fd_feedBack') { //封堵分发
        this.isFd = true
      } else { //解封分发
        this.isFd = false
      }
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.rvTime = []
      this.onQuery()
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
      // console.log(this.pageData);
    },
    //重置
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.rvTime = []
      this.refreshTable()
    },
    refreshTable() {
      let api = ""
      if (this.isFd) {
        api = feedbackLog(this.pageFilter)
      } else {
        api = unsealFeedbackLog(this.pageFilter)
      }
      this.loading = true
      api.then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.pageData = {}
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTimeChange(date) {
      if (this.isFd) {
        this.$set(this.pageFilter, 'startFeedbackStartTime', date[0])
        this.$set(this.pageFilter, 'endFeedbackStartTime', date[1])
      } else {
        this.$set(this.pageFilter, 'startTime', date[0])
        this.$set(this.pageFilter, 'endTime', date[1])
      }
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    setTittle(text) {
      return this.$filterDictTextByCache('case_fraud_type', text)  //现在字典中对应的文字，是全局函数
    },
    onOut() {
      let api = ''
      let fileName = ''
      if (this.isFd) {
        api = feedbackLogOut(this.result)
        fileName = '封堵指令反馈日志.xls'
      } else {
        api = unsealFeedbackLogOut(this.result)
        fileName = '解封指令反馈日志.xls'
      }
      api.then(async res => {
        if (res && res.size > 0) {
          await downLoadMix(res, fileName)
          this.$emit('ok')
        } else {
          this.$message.warn("导出失败！")
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.search-wrapper-btn {
  position: absolute;
  right: 8%;
  top: 22px;
  z-index: 100;
}
</style>